---
export const prerender = false;
import BaseLayout from "@/layouts/BaseLayout.astro";
import PostItem from "@/components/PostItem.astro";
import Pagination from "@/components/Pagination.astro";
import {markedLine} from "@/utils/markedUtil";
import config from '@/config/config.json'
import {Image} from 'astro:assets'
import {getBlogCount, getBlogList} from "@/service/BlogService";
const blog_folder = 'blog'
const {searchParams} = new URL(Astro.request.url);
const page = parseInt(searchParams.get('page') || '1')
const pageSize = config.settings.pagination
const posts = await getBlogList(page, pageSize)
const totalCount = await getBlogCount()
const totalPages = Math.ceil(totalCount / pageSize)
const summary_length = 200;
---
<BaseLayout>
    <section class="section">
        <div class="container">
            <h1 class="text-center font-normal lg:text-[56px]">Last News</h1>
            <div class="row pb-12">
                <div class="row col-12 pb-24 pt-16">
                    <div class="md:col-6">
                        {
                            posts[0].image && (
                                        <Image
                                                class="rounded-lg"
                                                src={posts[0].image}
                                                alt={posts[0].title}
                                                width={925}
                                                height={475}
                                        />
                            )
                        }
                    </div>
                    <div class="md:col-6">
                        <h2 class="h3 mb-2 mt-4">
                            <a
                                    href={`/${blog_folder}/${posts[0].id}`}
                                    class="block hover:text-primary line-clamp-2"
                            >
                                {posts[0].title}
                            </a>
                        </h2>
                        <p  class="line-clamp-4" set:html={markedLine(posts[0].content.slice(0, summary_length))}/>
                        <a
                                class="btn btn-primary mt-4"
                                href={`/${blog_folder}/${posts[0].id}`}
                                rel=""
                        >
                            Read More
                        </a>
                    </div>
                </div>
                {
                    posts.slice(1).map((post) => (
                            <div class="col-12 mb-8 sm:col-6 lg:col-4">
                                <PostItem post={post}/>
                            </div>
                    ))
                }
            </div>
            <Pagination
                    section={blog_folder}
                    currentPage={page}
                    totalPages={totalPages}
            />
        </div>
    </section>
</BaseLayout>
